$(document).ready(function() {
    $("#chatForm").submit(function(event) {
        event.preventDefault(); // 阻止默认的表单提交行为

        var query = $("#query").val(); // 获取用户输入
        if (query.trim() === "") return; // 防止空输入

        // 用户输入的消息
        var userMessage = "<p class='user-message'><strong>你:</strong> " + query + "</p>";
        $("#chatBox").append(userMessage); // 将用户消息添加到聊天框

        // 清空输入框
        $("#query").val("");

        // 显示“正在思考...”的提示
        var thinkingMessage = "<p class='ai-response'><strong>AI:</strong> 正在思考...</p>";
        var aiMessageElement = $(thinkingMessage);
        $("#chatBox").append(aiMessageElement); // 将 AI 的思考提示添加到聊天框
        $("#chatBox").scrollTop($("#chatBox")[0].scrollHeight); // 滚动到最底部

        // 使用 AJAX 发送请求到后端
        $.ajax({
            url: "http://127.0.0.1:8080/chat/send",  // 后端路径，确保后端 API 正常运行
            type: "POST",
            data: { query: query },
            success: function(response) {
                // 如果 response 是字符串，尝试手动解析
                if (typeof response === "string") {
                    response = JSON.parse(response);
                }

                var aiAnswer = response.answer;  // 提取 "answer" 字段
                if (aiAnswer) {
                    // 删除“正在思考...”提示
                    aiMessageElement.remove();

                    // 逐字输出 AI 回复
                    var index = 0;
                    var outputText = "<strong>AI:</strong> "; // 确保只有一个 "AI:" 标签
                    var outputElement = $("<p class='ai-response'></p>").appendTo("#chatBox");

                    var interval = setInterval(function() {
                        outputText += aiAnswer.charAt(index); // 逐字添加
                        outputElement.html(outputText); // 更新输出
                        index++;
                        if (index === aiAnswer.length) {
                            clearInterval(interval); // 当所有字母都输出完成，停止定时器
                        }
                    }, 50); // 50ms 逐个输出字符（你可以根据需要调整速度）

                    // 自动滚动到底部
                    $("#chatBox").scrollTop($("#chatBox")[0].scrollHeight);
                } else {
                    var errorMessage = "<p class='ai-response'><strong>AI:</strong> 未能获取 AI 的回复。</p>";
                    $("#chatBox").append(errorMessage); // 显示错误消息
                }
            },
            error: function(xhr, status, error) {
                var errorMessage = "<p class='ai-response'><strong>AI:</strong> 出现错误，请稍后再试。</p>";
                $("#chatBox").append(errorMessage); // 显示错误消息
            }
        });
    });
});
